<template>
	<view class="pop-dialog" v-if="showDialog" :style="'bottom:'+bottomPosition+'px;right:'+rightPosition">

		<view class="pop-body" :style="'background-color:'+bgColor+';'">
			<!-- 			<view v-for="(item,index) in menuList" v-bind:key="index" class="pop-item" @click="onClickPopMenu(item)">
				<view class="uni_flex_row_align_left" style="height: 100rpx;width: 100%;">
					<image class="pop-img" :src="item.icon" v-if="item.icon"></image>
					<text class="uni_16px_400_colorfff" style="margin-left: 40rpx;"
						:style="'color:'+textColor+';'">{{item.name}}</text>
				</view>
				<view :class="item.icon?'pop-line':'pop-line-full'" :style="'background-color:'+lineColor+';'"
					v-if="index < menuList.length - 1"></view>
			</view> -->

			<view class=""
				style="justify-content: space-between;display: flex;align-items: center;background-color: white;padding: 10px 5px 10px 20px;border-radius: 20px;width: 240px;">
				<view class="" style=""  @click="onClickPopMenu(item)" v-for="(item,index) in list" :key="index">
				
					<image style=" height: 30px;" :src="item.url" mode="heightFix">
					</image>
					<view style="font-size: 30rpx;font-weight: 700;">{{item.name}}</view>
				</view>
		
			</view>

		</view>
		<!-- 三角形  如果要定制的话，从这里找到css triangle进行修改 -->
		<view class="triangle" :style="'margin-right:20px;border-bottom: 25rpx solid '+bgColor+';'">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			textColor: {
				type: String,
				default: '#ffffff'
			},
			bgColor: {
				type: String,
				default: '#4B4B4B'
			},
			lineColor: {
				type: String,
				default: '#6C6C6C'
			},
			isShow: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			bottom: {
				type: Number,
				default: 0
			},
			left: {
				type: Number,
				default: 0
			},
			right: {
				type: Number,
				default: 0
			},
			// triangleMarginRight: {
			// 	type: Number,
			// 	default: 40
			// }
		},
		data() {
			return {
				showDialog: false,
				menuList: [],
				bottomPosition: 0,
				rightPosition: 0,
				leftPosition: 0
			}
		},
		watch: {
			isShow: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.showDialog = newVal;
				}
			},
			list: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.menuList = newVal;
				}
			},
			bottom: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.bottomPosition = newVal;
				}
			},
			left: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.leftPosition = newVal;
				}
			},
			right: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.rightPosition = newVal;
				}
			},
		},
		methods: {
			onClickPopMenu(item) {
				
				this.$emit('onClickPopupItem', item);
			}
		}
	}
</script>

<style>
	.pop-dialog {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		position: absolute;
		z-index: 99;

	}

	.triangle {}

	.triangle:before {
		content: "";
		width: 0px;
		height: 0px;
		border-top: 10px solid white;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		position: absolute;
		/* top: 100px; */
		right: 24px;
	}


	.pop-body {
		border-radius: 10px;
		/* width: 288rpx; */
		display: flex;
		box-shadow: 0 0 15px rgb(62 61 61 / 50%);
		margin-right: 10px;
	}

	.pop-item {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}

	.pop-line-full {
		width: 288rpx;
		height: 2rpx;
	}

	.pop-line {
		width: 166rpx;
		height: 2rpx;
	}

	.pop-img {
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
</style>